import { Card } from "antd";
import "./MikuCard.css";
import type { ReactNode } from "react";

// 先获取Card组件的所有属性，然后移除hoverable属性
type OmitHoverable<T> = Omit<T, 'hoverable'>;

// 继承移除了hoverable的Card属性，并添加自定义属性
interface MikuCardProps extends OmitHoverable<React.ComponentProps<typeof Card>> {
  // 卡片标题
  title: ReactNode;
  // 特效开关（自定义属性）
  effects?: {
    glow?: boolean;
    wave?: boolean;
    hover?: boolean;
  };
}

export const MikuCard = ({
  title,
  children,
  extra,
  effects = {
    glow: true,
    wave: true,
    hover: true,
  },
  style,
  ...restProps
}: MikuCardProps) => {
  // 解构特效配置，设置默认值
  const { glow = true, wave = true, hover = true } = effects;
  
  // 合并宽度样式（优先使用用户传入的style）
  const mergedStyle = {
    width: 300, // 默认宽度
    ...style,
  };
  
  // 根据开关状态组合类名
  const cardClasses = `miku-card ${glow ? 'miku-glow' : ''} ${wave ? 'miku-wave' : ''} ${hover ? 'miku-hover' : ''}`;
  const bodyClasses = `miku-card-body`;

  return (
    <Card 
      size="small" 
      title={title} 
      extra={extra}
      className={cardClasses}
      bodyClassName={bodyClasses}
      style={mergedStyle}
      hoverable={false} // 强制禁用原生hoverable属性
      {...restProps} // 传递所有剩余的原生属性（已不包含hoverable）
    >
      {children}
    </Card>
  );
};
